<template>
	<div>

		<div class="main">
			<router-link class="literature-details" v-for='(item,index) in details' :key="index" :to='{name:"periodicallist",params:{perdata:JSON.stringify(item)}}'>
				<img :src="perSrcsmail+(item.max_file_name).substring(0,4)+'.jpg'" alt="" onerror="this.src='../../../../static/home/tushu.png'" width="80px" />
				<div class="info">
					<p v-text="item.source"></p>
					<p>更新至{{item.max_period}}期</p>
					<p>{{item.max_unit}}</p>
				</div>
			</router-link >
		</div>
	</div>
</template>

<script>
	import api from './../../../api/api.js';
	export default {
		props:["details"],
		data(){
			return {
				perSrcsmail:'',
			}
		},
		created() {
			this.perSrcsmail = api.perSrcsmail;
			console.log(this.details)
		},
		methods:{
			back(){
				this.$router.back(-1);
			}
		}
	}
</script>

<style scoped>
	.literature-details {
		width: 100%;
		display: flex;
		/*justify-content: center;*/
		align-items: center;
		/*background: coral;*/
		margin-bottom: 12px;
	}
	
	.literature-details img {
		margin-left: 15px;
		border-radius: 8px;
	}
	
	.literature-details .info {
		margin-left: 20px;
		padding-right: 15px;
	}
	
	.literature-details .info p:nth-of-type(1) {
		margin-bottom: 5px;
		font-size: 15px;
		color: #252525;
	}
	
	.literature-details .info p:nth-of-type(2) {
		margin-bottom: 5px;
		font-size: 13px;
		color: #252525;
	}
	
	.literature-details .info p:nth-of-type(3) {
		margin-bottom: 5px;
		font-size: 12px;
		color: #A1A1A1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.literature-details .info p:nth-of-type(4) {
		font-size: 13px;
		color: #A1A1A1;
	}

</style>